<template>
  <BasicDrawer class="wyf-drawer" v-bind="$attrs" @register="registerBaseDrawer" title="住客详情" width="60%" :showFooter="showFooter" destroyOnClose>
    <div>
      <div class="wyf-form-item-box" v-for="item in detailSchema" :key="item.field">
        <template v-if="item.slot">
          <div class="wyf-form-item-title">{{ item.field }}<span v-if="item.field == '入住记录'"></span></div>
        </template>
        <template v-else>
          <div class="wyf-form-item-label">{{ item.label }}：</div>
          <div class="wyf-form-item-text" v-if="item.component == 'JImageUpload'">
            <a-image-preview-group>
              <a-image
                :width="100"
                :height="100"
                :src="info[item.field] || 'https://www.antdv.com/#error'"
                fallback=""
              />
              <!-- <span class="wyf-m-r-20"></span> -->
              <!-- <a-image :width="100" :height="100" src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" /> -->
            </a-image-preview-group>
          </div>
          <div class="wyf-form-item-text v-else">
            <span :class="item?.color && item?.color(info[item.field])">{{ info[item.field] || '' }} </span>
          </div>
        </template>
      </div>
    </div>
    <BasicTable @register="registerTable">
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" />
      </template>
    </BasicTable>
  </BasicDrawer>
  <!--入住详情抽屉-->
  <OrderDetailDrawer @register="registerDrawer" />
</template>
<script lang="ts" setup>
  import { defineComponent, ref, computed, unref, useAttrs } from 'vue';
  import { detailSchema, historyColumns } from '../tenant.data';
  import { BasicDrawer, useDrawerInner, useDrawer } from '/@/components/Drawer';
  import { wyfOrders } from '/@/views/house/approved/approved.api';
  // import { useDrawerAdaptiveWidth } from '/@/hooks/jeecg/useAdaptiveWidth';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import OrderDetailDrawer from '/@/views/checkin/checkinRecord/components/DetailDrawer.vue';
  // 声明Emits
  const emit = defineEmits(['success', 'register']);
  const attrs = useAttrs();
  const isUpdate = ref(true);
  const showFooter = ref(true);
  const info: any = ref({});

  //注册drawer
  const [registerDrawer, { openDrawer }] = useDrawer();

  //注册drawer
  const [registerBaseDrawer, { setDrawerProps }] = useDrawerInner(async (data) => {
    setProps({ searchInfo: { zjhm: data.record.zjhm } });
    showFooter.value = data?.showFooter ?? true;
    setDrawerProps({ confirmLoading: false, showFooter: showFooter.value });
    isUpdate.value = !!data?.isUpdate;
    info.value = data.record;
  });

  const [registerDetailDrawer, { openDrawer: openDetailDrawer }] = useDrawer();

  //注册table
  const [registerTable, { reload, updateTableDataRecord, setProps }] = useTable({
    title: '',
    api: wyfOrders,
    columns: historyColumns,
    striped: false,
    useSearchForm: false,
    showTableSetting: false,
    clickToRowSelect: false,
    bordered: false,
    showIndexColumn: false,
    // 【issues/1064】列设置的 cacheKey
    //tableSetting: { fullScreen: true, cacheKey: 'role_user_table' },
    canResize: false,
    rowKey: 'id',
    actionColumn: {
      width: 60,
      title: '操作',
      dataIndex: 'action',
      slots: { customRender: 'action' },
      fixed: undefined,
      align: 'left',
    },
    scroll: { x: 600 },
  });
  /**
   * 操作栏
   */
  function getTableAction(record) {
    return [
      {
        label: '详情',
        onClick: handleDetail.bind(null, record),
      },
    ];
  }
  /**
   * 详情
   */
  async function handleDetail(record: Recordable) {
    openDrawer(true, {
      record,
      isUpdate: true,
      showFooter: false,
    });
  }
  //const { adaptiveWidth } = useDrawerAdaptiveWidth();
</script>
<style lang="less" scoped>
  .width-155 {
    width: 155px;
  }
  // .personalization-label {
  //  width: auto;
  //   min-width: auto;
  //   text-align: left;
  // }
</style>
